<template>
  <div>
    <div class="header">
      <van-nav-bar
        class="nav-bar"
        title="2018年7月3日 02:49"
        left-text="返回"
        right-text="按钮"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="detail">
      <img :src="data.children" alt="" />
      <p>知道吗？男孩站在女孩子的左边是因为那样可以离她的心更近一些</p>
      <div class="footer">
        <van-rate v-model="value" />
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      data: {},
      value: 3,
    }
  },
  methods: {
    onClickLeft() {
      this.$router.push('/')
    },
    async getData(id) {
      let resp = await axios.get('/api/detail', { params: { id } })
      console.log(resp)
      this.data = resp.data.item
      console.log(this.data)
    },
  },
  created() {
    const { id } = this.$route.params
    console.log(id)
    this.getData(id)
  },
}
</script>
<style>
.nav-bar {
  background-color: #000;
}
.nav-bar title {
  color: #f00;
}
.detail {
  background-color: #000;
  width: 100%;
  height: 800px;
}
.detail p {
  font-size: 16px;
  color: #fff;
}
.detail img {
  width: 100%;
  height: 400px;
  margin: 20px 5px;
}
.detail image {
  width: 30px;
  height: 30px;
}
</style>
